require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/fonts/iconfont.css");
require("./first.less");

//引入swiper
require("../../libs/swiper/swiper-bundle.css");
const Swiper = require("../../libs/swiper/swiper-bundle.js");
// 引入模块
const dom = require("../../utils/dom.js");
const axios = require("axios");

document.addEventListener("DOMContentLoaded", function () {
	//初始化swiper
	new Swiper(".swiper", {
		loop: true, // 循环模式选项
		autoplay: {
			//自动播放
			delay: 1000,
			stopOnLastSlide: false,
			disableOnInteraction: false, //用户交互后不禁用自动播放
		},

		// 如果需要分页器
		pagination: {
			el: ".swiper-pagination",
		},
	});
	// 发送请求获取用户个人信息
	axios.defaults.baseURL = "http://fitness.h5.itsource.cn:3701";
	let token = localStorage.getItem("token");
	// console.log(token);
	axios.defaults.headers.common["Authorization"] = "Bearer " + token;
	axios.get("/api/user/info").then(res => {
		// console.log(res);
		let userData = res.data.data;
		// 渲染排名
		dom.get("#rank span").textContent = userData.ranking;

		// 渲染徽章
		dom.get("#badge div").textContent = userData.badges;
	});
	function render() {
		// 发送请求获取渲染打卡数据
		axios.get("/api/user/clockInInfo").then(res => {
			// console.log(res);
			// 渲染打卡天数
			dom.get("#clock span").textContent = res.data.data.clockCount;
			// 判断是否打卡
			let btn = dom.get("#clockBtn");
			// 如果已打卡,按钮被禁用并显示已打卡
			if (res.data.data.isClockIn) {
				btn.disabled = true;
				btn.textContent = "已打卡";
				btn.style.backgroundColor = "#eee";
			}
		});
	}
	render();
	// 绑定打卡点击事件
	dom.get("#clockBtn").addEventListener("click", function () {
		// 发送打卡请求
		axios.post("/api/user/clockIn").then(res => {
			// console.log(res);
			if (res.data.errno === 0) {
				alert("打卡成功哦,明天继续!");
				render();
			}
		});
	});
	// 底部导航选项卡切换
	dom.tabbar("index");
});
